﻿<html>
<head>
<meta charset="utf-8">
<title>圣诞抽奖</title>

<style>
*{padding:0; margin:0;}
body{
background:url('${rc.contextPath}/images/jnhdyhb.png') no-repeat center top;
background-size:auto 100%;
}
.container{width:800px; height:200; position:fixed; left:40%; margin:-100px 0 0 -200px; text-align:center;}
.result-box{
    text-shadow: 2px 0px 0px #fff;
	text-align:center;
	line-height:60px;
	font-size:34px;
    overflow: hidden;}
button{ width:200px; height:50px; line-height:50px; margin-top:30px; border:none; color:#fff; font-size:24px;}
button:focus{outline:none;}
.start{ background-color:rgba(255,196,255,0.5);}
.end{ background-color:rgba(255,196,255,0.5);}
</style>
<script type="text/javascript" src='${rc.contextPath}/js/jquery-1.7.2.min.js'></script>
</head>
<body>

<div class="container">
	<div class="result-box" style="height: ${size*60}px;">
        <ul id="auth-ul">
		<#list list as auth>
            <li id="auth-${auth.id?c}"><span name="real">${auth.name}</span></li>
		</#list>
        </ul>
	</div><!--result-box-->
	<button class="start" onClick="start()">开始抽奖</button>
</div><!--container-->
<script type="text/javascript">

    $(".container").css("top",(document.body.clientHeight/2-30*${size}));

	var btn=true; //按钮状态未开始还是结束
	var key=0; //中奖下标
	var time=0; //定时器

	
	//点击按钮
	var startFlag = true;
	function start(){
	    if (startFlag){
            startFlag = false;
            if(btn){
                btn=false;
                $("button").removeClass("start").addClass("end").text("结束抽奖");
                startTrun();
            }else{
                btn=true;
                $("button").removeClass("end").addClass("start").text("开始抽奖");
                endTrun();
            }
		}
	}

	function trunNum(){
		key=Math.floor(Math.random()*(data.length-1));
		var tel=data[key];
		$(".result-box").text(tel);
	}
	
	//开始转动数字
	var taskTime = 50;
	var size = '${size}';
	var group = '${group}';
    var auths = {};
	function startTrun(){
        auths = {};
        time = setInterval(trunLi,taskTime);
		//开始之后，获取名单
        $.ajax({
            url : "${rc.contextPath}/admin/draw/christmas/draw",
            dataType : "json",
			data : {"size":size,"group":group},
            type:'post',
            success:function(json){
                startFlag = true
                if (json.code == 0){
                    auths = json.data;
                } else {
                    alert(json.message);
                    start();
                }
            }
        });

		//名单字段：真黑幕auth，假黑幕auth，获奖人auth
        //根据获奖人id，获取id前n个li，并进行减速显示
        //如果获奖人页面不存在，则加入最后li
		//如果有真黑幕，则显示真黑幕
		//如果有假黑幕，则显示假黑幕1秒，获奖人根据动画bouncelnLeft登录，假黑幕根据rollOut退出
	}


	function trunLi(){
		$(".result-box ul").animate({marginTop:"-60px"},taskTime,function(){$("li:first").insertAfter("li:last");$(".result-box ul").css("margin-top","0px");})
	}

	//停止转动数字
	var stopTrunNum = 10;
	function endTrun(){
        clearInterval(time);
        $(".result-box ul").stop(true,true);
        var index = stopTrunNum+10;
        var ul = $("#auth-ul");
        for(var i=0;i<auths.length;i++){
            var auth = auths[i];
            var authLi = $("#auth-"+auth.id);
            if (authLi.length == 0){
                var span1 = $('<span name="real">'+auth.name+'</span>');
                authLi = $('<li id="auth-'+auth.id+'"></li>');
                authLi.append(span1);
			}
            ul.children("li").eq(index).before(authLi);
            index = ul.children("li").index(authLi);
		}
		var tt = 0;
        for (var i=1;i<=index;i++){
            var t = 50;
            if (i > stopTrunNum){
                t = (i-stopTrunNum)*(i-stopTrunNum)*30+20;
			}
			$(".result-box ul").animate({marginTop:"-60px"},t,function(){$("li:first").insertAfter("li:last");$(".result-box ul").css("margin-top","0px");})
			tt = tt+t;
		}
        startFlag = true
	}






</script>

</body>
</html>

